<template>
	<uni-popup ref="loginPopup" :isTopOffset="isTopOffset" type="center" v-show="visible" @change="visibleChange">
		<view class="login-popup">
			<view class="popup-title">授权提示</view>
			<view class="popup-tip">需要获取您的公开信息(昵称、头像等)</view>
			<image src="/static/login-bg.png" mode="aspectFill" class="login-img"></image>
			<button open-type="getUserInfo" @getuserinfo="onGetUserInfo" class="popup-btn">确定</button>
		</view>
	</uni-popup>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		name:'login-popup',
		components:{
			uniPopup
		},
		props:{
			visible:{
				type: Boolean,
				default:false
			},
			isTopOffset:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				
			}
		},
		mounted(){
		},
		watch:{
			'visible':function(val){
				if(val){
					this.$refs['loginPopup'].open()
				} else {
					this.$refs['loginPopup'].close()
				}
			}
		},
		methods:{
			close(){
				this.$emit('update:visible', false)
				this.$refs['loginPopup'].close()
			},
			visibleChange({show}){
				this.$emit('update:visible', show)
			},
			onGetUserInfo({detail}){
				const {errMsg}=detail
				if(errMsg==='getUserInfo:ok'){
					uni.login({
						success:({code})=>{
							uni.getUserInfo({
								success:async ({iv,encryptedData})=>{
									await this.$store.dispatch('bind',{code,iv,encryptedData})
									this.$store.dispatch('getUserInfo')
									this.$emit('success')
									this.close()
								}
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.login-popup{
	position: relative;
	width: 580rpx;
	padding:50rpx;
	border-radius: 10rpx;
	background-color: #fff;
	text-align: center;
	.popup-title{
		margin-bottom: 40rpx;
		font-size: 36rpx;
		font-weight: 600;
	}
	.popup-tip{
		margin-bottom: 40rpx;
		font-size: 28rpx;
		color: #999;
	}
	.login-img{
		width: 312rpx;
		height: 230rpx;
		margin-bottom: 40rpx;
	}
	.popup-btn{
		width: 480rpx;
		height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #E7404A;
		border-radius: 10rpx;
	}
	.close-icon{
		position: absolute;
		left: 50%;
		bottom:-90rpx;
		transform: translateX(-50%);
		font-size: 50rpx;
		color: #fff;
	}
}
</style>
